<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="chrome=1">
        <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <title>MS blog content</title>
        <link rel="shortcut icon" type="image/ico" href="res/img/favicon.ico">
        <!-- font-awesome -->
        <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
        <!-- bootstrap css -->
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
        <!-- show time plugin -->
        <link rel="stylesheet" type="text/css" href="plugins/roundabout/roundabout2.css">
        <!-- custom css -->
        <link rel="stylesheet" type="text/css" href="res/css/stylesheet.css" media="screen">

        <link rel="stylesheet" type="text/css" href="res/css/common.css">
        <link rel="stylesheet" type="text/css" href="res/css/app.css">
    </head>

    <body>
        <div id="topAnchor"></div>
        <nav class="nav-container">
            <div class="nav-content">
                <div class="nav-header pull-left">
                    <img id="logoImg" src="res/img/logo.png">
                </div>
                <div class="nav-body">
                    <ul class="nav nav-list pull-left">
                        <li>
                            <a id="blogLink">
                                <i class="fa fa-book"></i>&nbsp;<span data-hover="目录">Blog</span>
                            </a>
                        </li>
                        <li>
                            <a id="aboutLink" data-toggle="modal" data-target="#aboutModal">
                                <i class="fa fa-info-circle"></i>&nbsp;<span data-hover="关于">About</span>
                            </a>
                        </li>
                        <li>
                            <a id="contactLink" data-toggle="modal" data-target="#contactModal">
                                <i class="fa fa-envelope-o"></i>&nbsp;<span data-hover="粉我！">Contact</span>
                            </a>
                        </li>
                    </ul>
                    <ul class="nav pull-right">
                        <li>
                            <a href="index.html" id="backLink">Back To Homepage&nbsp;<i class="fa fa-sign-out"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="mask-container"></div>
        <div id="loading" class="loading">Loading</div>
        <div id="scrollBtn" onclick="$('#topAnchor').HoverTreeScroll(750);"><img src="res/img/scroll-bg.png"></div>
        
        <div id="bodyContainer" class="body-container hidden category init">
            <!-- class="category"，区别【全部文章title】和【某一类别下文章title或某一篇具体文章】 -->
            <div class="body-content row">
                <div class="col-xs-3">
                    <!-- Notice -->
                    <div class="content-block">
                        <dl class="comm-dl">
                            <dt>
                                Notice
                                <a id="noticeToggleBtn"><i class="fa fa-caret-down"></i></a>
                            </dt>
                            <dd>
                                <i class="fa fa-circle"></i>&nbsp;
                                访问本 Blog ，为避免部分样式失效，请使用内核支持 CSS3 的浏览器， IE 浏览器请使用 IE9+ 版本。
                            </dd>
                            <dd>
                                <i class="fa fa-circle"></i>&nbsp;
                                本网站仅供交流阅读使用，转载请注明出处，谢谢。
                            </dd>
                            <dd>
                                <i class="fa fa-circle"></i>&nbsp;
                                网站刚搭建完成没多久，其实是把我在博客园的内容迁移过来，顺带还有一些新的内容还没添加上来，导致看起来东西很少，尽快会完善页面并将内容整体迁移过来。
                            </dd>
                            <dd>
                                <i class="fa fa-warning text-danger"></i>
                                关于博文中的代码显示不正常，因为使用了xmp标签,可能在IE下会显示不正常，关于解决方案，作者会尽快想一个好的解决办法的。
                            </dd>
                        </dl>
                    </div><!-- Notice END -->

                    <!-- Tags -->
                    <div class="content-block">
                        <dl id="tagList" class="comm-dl">
                            <dt>Tags</dt>
                            <!-- show tags -->
                        </dl>
                    </div><!-- Tags END -->

                    <!-- Latest five papers -->
                    <div class="content-block">
                        <dl id="latestList" class="comm-dl">
                            <dt>Latest</dt>
                            <!-- <dd><a>文章标题</a></dd> -->
                        </dl>
                    </div><!-- Latest END -->

                    <!-- timeline -->
                    <div class="content-block">
                        <dl id="timeList" class="comm-dl">
                            <a class="content-icon"><i class="fa fa-history"></i></a>
                            <dt id="timeLineTitle">
                                Timeline<br>
                                <div id="timeBlock"><!-- to show current time -->
                                    <div class="crappy-plastic-part-made-in-china">
                                        <div class="pad">
                                            <ul id="hours-tens"><li>&nbsp;</li><li>1</li></ul>
                                            <ul id="hours-ones"><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>
                                            <ul class="delimiter"><li>:</li></ul>
                                            <ul id="minutes-tens"><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
                                            <ul id="minutes-ones"><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>
                                            <ul class="delimiter"><li>.</li></ul>
                                            <ul id="seconds-tens"><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
                                            <ul id="seconds-ones"><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>
                                            <ul id="ampm"><li>am</li><li>pm</li></ul>
                                        </div>
                                    </div>
                                </div>
                            </dt>
                            <!-- <dd>2011-01-01</dd> -->
                        </dl>
                    </div><!-- timelie END -->
                </div>

                <div class="col-xs-9">
                    <div id="paperContent" class="content-block">
                        <div class="paper-title">
                            <h1>Directory</h1>
                        </div>
                        <div class="paper-subtitle">
                            <h3>
                                <span class="subtitle-date">
                                    <i class="fa fa-calendar"></i>&nbsp;<span class="date-val"></span>
                                </span>
                                <span class="subtitle-tags">
                                    <i class="fa fa-tags"></i>&nbsp;<span class="tags-val"></span>
                                </span>
                            </h3>
                        </div>
                        <hr>
                        <div class="paper-content"></div>
                        <hr class="footer-hr">
                        <div class="paper-footer row">
                            <div class="col-xs-6 pre-title">
                                <i class="fa fa-arrow-circle-o-left pull-left"></i><a id="prePaper"></a>
                            </div>
                            <div class="col-xs-6 next-title">
                                <a id="nextPaper"></a><i class="fa fa-arrow-circle-o-right pull-right"></i>
                            </div>
                        </div>
                        <hr class="footer-hr">
                        <div class="comment-container">
                            <div>
                                <strong class="comment-title"><i class="fa fa-commenting-o"></i>&nbsp;Comments</strong>
                                <a id="commentPaperBtn" class="pull-right"><i class="fa fa-comment-o"></i>&nbsp;回复</a>
                            </div>
                            <div class="comment-content"></div>
                        </div>
                        <div id="paperPage" class="no-page"></div>
                    </div>
                </div>
            </div>
        </div>

        <div id="aboutModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="aboutModalLabel">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title" id="aboutModalLabel">About</h4>
                    </div>

                    <div class="modal-body">
                        <dl class="comm-dl">
                            <dt>About WebPage</dt>
                            <dd>
                                关于网站，除了感谢github、bootstrap、jquery、font-awesome和roundabout外，还得谢谢Jason Long，因为首页（index.html，就是整个博客刚进来那一页内容）就是在他分享的模板的基础上进行修改的。<br>
                                关于本网站的源码，我已经放在github上了，有兴趣的小伙伴可以通过“Contact Me!”里面的github链接，到我github主页下查看对应项目。<br>
                                PS：好像感谢了他们也看不到，不过还是得感谢一下。
                            </dd>

                            <dt>About Blog</dt>
                            <dd>
                                关于这个博客的内容，其实大多数内容都是自己的一些笔记和踩过坑。<br>
                                PS：其实这些个内容都是别人踩过的坑，百度都能搜得到，不过还是想把这些放上来，作为自己的一个学习的笔记。
                            </dd>

                            <dt>About Website</dt>
                            <dd>
                                关于网站的实现，原版在这里<a href="https://monkingstand.github.io" target="_blank" style="display: inline-block;margin: 0;"><i class="fa fa-send"></i>click to go</a>。<br>
                                之前是一个纯静态的站点，用了jquery读取本地json文件，模拟ajax的情况。<br>
                                现在做了部分改进，使用nodejs做服务器端环境，数据采用mysql进行存储，ajax异步获取数据。<br>
                                原本想把登录注册以及在线编辑、修改文章以及评论等等功能做上的，后来发现工作量有点大，暂时先搁置了，等有机会了再扩展一下吧。
                            </dd>
                        </dl>
                    </div><!-- modal-body -->
                </div><!-- modal-content -->
            </div><!-- modal-dialog -->
        </div><!-- about modal -->

        <div id="contactModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title" id="contactModalLabel">Contact ME!</h4>
                    </div>

                    <div class="modal-body">
                        <a data-toggle="tooltip" title="view on github" href="https://github.com/MonkingStand" target="_blank">
                            <i class="fa fa-lg fa-github"></i>
                        </a>&nbsp;&nbsp;
                        <a data-toggle="tooltip" title="email me" href="mailto:tangjianyi1993@live.com?subject=would you mind have a small talk">
                            <i class="fa fa-lg fa-envelope"></i>
                        </a>&nbsp;&nbsp;
                        <a data-toggle="tooltip" title="follow me on weibo" href="http://weibo.com/monkingstand" target="_blank">
                            <i class="fa fa-lg fa-weibo"></i>
                        </a>&nbsp;&nbsp;
                        <a data-toggle="tooltip" title="follow me on wechat" href="res/img/wechat-qr.jpg" target="_blank">
                            <i class="fa fa-lg fa-weixin"></i>
                        </a>&nbsp;&nbsp;
                        <a data-toggle="tooltip" title="follow me on qq" href="http://sighttp.qq.com/msgrd?v=3&uin=913270680&site=&menu=yes" target="_blank">
                            <i class="fa fa-lg fa-qq"></i>
                        </a>
                    </div><!-- modal-body -->
                </div><!-- modal-content -->
            </div><!-- modal-dialog -->
        </div><!-- contact modal -->

        <div id="commentModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title" id="commentModalLabel">Add Message</h4>
                    </div>

                    <div class="modal-body">
                        <div class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="userName" class="col-xs-2 control-label">Your Name</label>
                                <div class="col-xs-10">
                                    <input type="text" class="form-control" id="userName" placeholder="type your nickname here...">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="messageContent" class="col-xs-2 control-label">Your message</label>
                                <div class="col-sm-10">
                                    <!--<input type="text" class="form-control" id="messageContent" placeholder="type your message here...">-->
                                    <textarea class="form-control" id="messageContent" placeholder="type your message here..." cols="5"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row operate-container">
                            <div class="col-xs-5 text-right">
                                <a id="commentSubmitBtn" class="btn btn-default">submit</a>
                            </div>
                            <div id="submitProcess" class="col-xs-2 text-center"><i class="fa fa-spinner fa-spin"></i></div>
                            <div class="col-xs-5 text-left">
                                <a class="btn btn-default" data-dismiss="modal">cancel</a>
                            </div>
                        </div>
                    </div><!-- modal-body -->
                </div><!-- modal-content -->
            </div><!-- modal-dialog -->
        </div><!-- about modal -->

        <!-- jquery -->
        <script type="text/javascript" src="jquery/2.1/jquery.js"></script>
        <!-- bootstrap js -->
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
        <!-- show time plugin -->
        <script type="text/javascript" src="plugins/roundabout/jquery.roundabout2.js"></script>
        <script type="text/javascript" src="plugins/roundabout/jquery.roundabout-shapes2.js"></script>
        <script type="text/javascript" src="plugins/roundabout/jquery.easing.js"></script>
        <!-- scrolltree plugin -->
        <script type="text/javascript" src="plugins/scrolltree/hoverTreeScroll.js"></script>
        <!-- sys js -->
        <script type="text/javascript" src="res/js/app.js"></script>
        <!-- main js -->
        <script type="text/javascript" src="res/js/main.js"></script>
    </body>
</html>
